import { useMount } from "@/hooks";
import { Dispatch, FC, SetStateAction, useContext, useMemo, useRef, useState } from "react";
import { calcSize, getMobileSize } from "src/util";
import { ConfigurePageContext } from "../../ConfigurePage";
import { CatItem } from "../../ConfigurePageType";
import { CommonModuleProps } from "../PreviewDevice";
import { ModuleCarousel } from "./components/ModuleCarousel";

const CatModule: FC<CommonModuleProps> = (props) => {
	const [activeIndex, setActiveIndex] = useState(0);
	return <CatMain {...props} activeIndex={activeIndex} setActiveIndex={setActiveIndex} />;
};

interface CatMainProps extends CommonModuleProps {
	afterChange?(currentSlide: number): void;
	activeIndex: number;
	setActiveIndex: Dispatch<SetStateAction<number>>;
}

const CatMain: FC<CatMainProps> = ({ index, activeIndex, setActiveIndex }) => {
	const { content } = useContext(ConfigurePageContext);
	const { rows = 2, columns = 5 } = useMemo(() => content[index], [content]);
	const realRows = useMemo(() => rows || 1, [rows]);
	const realColumns = useMemo(() => columns || 1, [columns]);
	const list = useMemo(() => content[index].list as CatItem[], [content, index]);
	const swiperCats = useMemo(() => {
		let arr: CatItem[][] = [];
		list.forEach((item) => {
			if (!arr.length) {
				arr = [[item]];
			} else {
				if (arr[arr.length - 1].length < realColumns * realRows) {
					arr[arr.length - 1].push(item);
				} else {
					arr.push([item]);
				}
			}
		});
		return arr;
	}, [list, realRows, realColumns]);
	const containerRef = useRef<HTMLDivElement>(null);
	const [containerWidth, setContainerWidth] = useState(0);
	useMount(() => {
		setContainerWidth(containerRef.current?.clientWidth || 0);
		window.addEventListener("resize", () => {
			setContainerWidth(containerRef.current?.clientWidth || 0);
		});
	});
	return (
		<div className={`pt-4 pb-2 bg-white`} style={{ width: "calc(22vw - 18px)", minHeight: "120px" }}>
			{swiperCats.length === 0 ? (
				<div style={{ minHeight: "120px" }} className="w-full flex justify-center items-center text-gray-500">
					暂无分类~
				</div>
			) : (
				<ModuleCarousel list={swiperCats} activeIndex={activeIndex} setActiveIndex={setActiveIndex} dotsStyle={{ bottom: "15px" }}>
					{swiperCats.map((item, index) => (
						<div key={index}>
							<div className="flex flex-wrap" ref={containerRef}>
								{item.map((item1, index1) => (
									<div
										key={index1}
										className="flex flex-col items-center overflow-hidden"
										style={{ width: `${100 / realColumns}%` }}
									>
										<img
											src={`${process.env.REACT_APP_BASEURL}${item1.icon}`}
											style={{
												borderRadius: calcSize(item1.borderRadius),
												width: calcSize(getMobileSize(item1.size), containerWidth),
												height: calcSize(getMobileSize(item1.size), containerWidth),
											}}
										/>
										<div className="mt-1" style={{ height: "22px" }}>
											{item1.name}
										</div>
									</div>
								))}
							</div>
						</div>
					))}
				</ModuleCarousel>
			)}
		</div>
	);
};

export default CatModule;
